<template>
	<!-- 客服弹窗 -->
	<view v-if="show" class="contact-modal-mask">
		<view class="contact-modal">
			<view class="contact-modal-header">
				<text class="contact-modal-title"></text>
			</view>
			<view class="contact-modal-content">
				<view class="contact-modal-item">
					<view class="contact-modal-info">
						<view class="success-title">{{ title }}</view>
						<view class="success-desc u-m-t-20">{{desc}}</view>
					</view>
				</view>
			</view>
			
			<view class="contact-modal-close" @click="onClose">
				<image :src="HTTP_IMG_URL()+'/static/images/close.png'" mode="aspectFill" class="contact-modal-close-img" />
			</view>
		</view>
	</view>
</template>

<script>
	import { HTTP_IMG_URL } from "@/config/app";
export default {
  name: 'SuccessModal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
	  title: String,
	  desc:String
  },
  emits: ['close'],
  methods: {
	HTTP_IMG_URL() {
	  	return this.$imgUrl;
	},
    onClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.contact-modal-mask {
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-modal {
	width: 600rpx;
	border-radius: 24rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 600rpx;
	border-radius: 32rpx;
	background: url() center no-repeat ;
	background-size: 100% 90%;
}
.contact-modal-header {
	width: 100%;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-modal-title {
	color: #011651;
	font-size: 36rpx;
	font-weight: bold;
}
.contact-modal-content {
	width: 100%;
	padding: 166rpx 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	.success-title {
		font-size: 36rpx;
		color: #2563eb;
		font-weight: bold;
		margin: 24rpx 0 8rpx 0;
		text-align: center;
	}
	.success-desc {
		color: #bbb;
		font-size: 26rpx;
		margin-bottom: 24rpx;
		text-align: center;
	}
}
.contact-modal-close {
	position: absolute;
	left: 50%;
	bottom: -95rpx;
	transform: translateX(-50%);
	width: 72rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	.contact-modal-close-img {
		width: 60rpx;
		height: 60rpx;
	}
}

</style> 